<template>
	<view class="content">
		
		<uni-row class="demo-uni-row" v-if="delopen == false">
			<uni-col :span="8" >
				<button type="primary"  @click="openUpdPass">修改密码</button>
			</uni-col>
			<uni-col :span="8" >
				<button type="warn"  @click="forDelete">删除记录</button>
			</uni-col>
			<uni-col :span="8">
				<view class="css_btn">
					<button type="primary" style="white-space: nowrap;" @click="getList">刷新</button>
				</view>
			</uni-col>
		</uni-row>
		
		<uni-row class="demo-uni-row" v-if="delopen == true">
			<uni-col :span="8">
				<view class="css_btn">
					<button type="primary" style="background-color: darkgrey;white-space: nowrap;" @click="cancelDel">取消删除</button>
				</view>
			</uni-col>
			<uni-col :span="16">
				<view class="css_btn">
					<button type="warn" style="white-space: nowrap;" @click="runDelete">删除选中数据</button>
				</view>
			</uni-col>
		</uni-row>
		<uni-list>
			<uni-list :border="true">
				<!-- 自定义右侧内容 -->
				<uni-list-chat :style="delids.indexOf(item.userid) != -1?'background-color:aquamarine;':''" :avatar="'../../static/images/'+(item.nickname == '匿名'?'mine_2.png':'mine_.png')" v-for="(item,ind) in msgdata" clickable :title="item.nickname + (item.deptname=='匿名'?item.userid:'')"  :note="(item.msgcnt==0?'':('('+item.msgcnt+')')) + (item.deptname=='匿名'?'':('【' + item.deptname +'】'))"  badge-positon="left" :badge-text="item.msgcnt==0?'':'dot'" @click="clickitem(item.userid)">
					<view class="chat-custom-right">
						<text class="chat-custom-text" style="font-size: 12px;color:#ccc;">{{item.maxdate}}</text>
					</view>
				</uni-list-chat>
			</uni-list>
		</uni-list>
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<uni-card>
				<uni-row class="demo-uni-row">
					<uni-col :span="8" >
						<button type="primary"  @click="openUpdPass">修改密码</button>
					</uni-col>
					<uni-col :span="8" >
						<button type="warn"  @click="forDelete">删除记录</button>
					</uni-col>
				</uni-row>
			</uni-card>
		</uni-popup>
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="updpass" type="dialog">
				<uni-popup-dialog ref="inputClose"  mode="input" title="修改密码" 
					placeholder="" @confirm="doUpdPass">
					<view class="normal-login-container">
						<text>密码需包含字母和数字并且长度大于6位</text>
						<view class="login-form-content">
						  <view class="input-item flex align-center">
							<view class="iconfont icon-password icon"></view>
							<input v-model="passform.password1" class="input" type="password" placeholder="请输入密码" maxlength="30" />
						  </view>
						  <view class="input-item flex align-center">
							<view class="iconfont icon-password icon"></view>
							<input v-model="passform.password2" type="password" class="input" placeholder="请再次输入密码" maxlength="20" />
						  </view>
						</view>
					</view>
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script setup>
	import { ref,onUpdated,getCurrentInstance,onMounted } from "vue";
	import { msguserlist ,chgpass,msgdelete} from '@/api/msgbox'
	import {onShow,onLoad,onUnload} from "@dcloudio/uni-app"	
	import {piniastore} from "@/store/compinia";
	let instance = getCurrentInstance(); // 获取组件实例
	
	const ps = piniastore();
	
	let delopen = ref(false);//是否开启删除功能
	
	let uid = ref("");
	let delids = ref([]);
	uid.value = ps.getUser().userid;
	if(uid.value == "" || uid.value == undefined){
		uni.navigateTo({url: "/pages/index/smlogin"});
	}
	let needchgpass = ref("");
	console.log("uid.value====",uid.value);
	onLoad((opts) => {
		needchgpass.value = ps.getUser().needchgpass;
		if(needchgpass.value == "false"){
			getList()
		}
	})
	onMounted(() => {
		if(needchgpass.value == "true"){
			openUpdPass()
		}
	})
	let passform = ref({});
	let msgdata = ref([]);
	function getList(){
		
		let queryparm = {};
		msguserlist(queryparm).then(res => {
		  msgdata.value = res.rows;
		})
	}
	
	
	//查看消息明细
	function clickitem(userid){
		if(delopen.value == true){//记录选中数据
			if(delids.value.indexOf(userid) != -1){
				let narr = [];
				for(let i = 0;i<delids.value.length;i++){
					if(delids.value[i] != userid){
						narr.push(delids.value[i]);
					}
				}
				delids.value = narr;
			}else{
				delids.value.push(userid);
			}
			
		}else{//直接跳转明细页面
			for(let i = 0;i<msgdata.value.length;i++){
				if(msgdata.value[i].userid == userid){
					msgdata.value[i].msgcnt = 0;
				}
			}
			uni.navigateTo({
				url: '/pages/index/sendmsg?userid='+userid
			});
		}
		
	}
	
	//打开设置
	function openSet(){
		instance.refs.share.open()
	}
	
	//打开密码修改窗口
	function openUpdPass(){
		instance.refs.updpass.open()
	}
	
	//确认修改密码
	function doUpdPass(){
		if(passform.value.password1 == ""){
			toast("密码不能为空！")
			return;
		}
		if(passform.value.password2 == ""){
			toast("密码不能为空！")
			return;
		}
		if(passform.value.password1 != passform.value.password2){
			toast("两次输入的密码不一致！")
			return;
		}
		passform.value.id = uid.value;
		passform.value.password = passform.value.password1;
		chgpass(passform.value).then(res => {
			uni.showToast({
			  title: res.msg,
			  mask: false,
			  duration: 4000
			});
			uni.navigateTo({url: "/pages/index/smlogin"});
			
		}).catch(() => {
		});
	}
	//删除记录
	function forDelete(){
		uni.showToast({
		  title: '请选中要删除的记录，然后点击删除按钮。',
		  mask: false,
		  duration: 4000
		});
		
		delids.value = [];
		instance.refs.share.close();
		delopen.value = true;
	}
	
	//确定删除
	function runDelete(){
		let parm = {params:{}}
		parm.params.ids = delids.value.join(",");
		msgdelete(parm).then(res => {
			uni.showToast({
			  title: res.msg,
			  mask: false,
			  duration: 4000
			});
			getList()
			cancelDel();
		}).catch(() => {
		});
		
	}
	//取消删除
	function cancelDel(){
		delids.value = [];
		delopen.value = false;
	}
</script>

<style lang="scss" scoped>
	.content {
	}
	
	.normal-login-container {
	  width: 100%;
	
	  .logo-content {
	    width: 100%;
	    font-size: 21px;
	    text-align: center;
	    padding-top: 15%;
	
	    image {
	      border-radius: 4px;
	    }
	
	    .title {
	      margin-left: 10px;
	    }
	  }
	
	  .login-form-content {
	    text-align: center;
	    margin: 20px auto;
	    margin-top: 15%;
	    width: 80%;
	
	    .input-item {
	      margin: 20px auto;
	      background-color: #f5f6f7;
	      height: 45px;
	      border-radius: 20px;
	
	      .icon {
	        font-size: 38rpx;
	        margin-left: 10px;
	        color: #999;
	      }
	
	      .input {
	        width: 100%;
	        font-size: 14px;
	        line-height: 20px;
	        text-align: left;
	        padding-left: 15px;
	      }
	
	    }
	
	    .login-btn {
	      margin-top: 40px;
	      height: 45px;
	    }
	
	    .xieyi {
	      color: #333;
	      margin-top: 20px;
	    }
	    
	    .login-code {
	      height: 38px;
	      float: right;
	    
	      .login-code-img {
	        height: 38px;
	        position: absolute;
	        margin-left: 10px;
	        width: 200rpx;
	      }
	    }
	  }
	}

</style>
